<!-- 
	/**
	 * All rights Reserved, Designed By www.youyacao.com <br>
	 * @Description:黑名单 <br>
	 * @version 蜻蜓Q系统  <br>
	 * @author:成都市一颗优雅草科技有限公司  <br>
	 * 注意：使用我司开源源代码请遵循license文件的协议仅供个人非盈利使用，禁止用于其他的商业用途
	 * 需要商业用途或者定制开发等可访问songshu.youyacao.com  联系QQ:2853810243 422108995 23625059584
	 * 正版系统查询系统 zhengbancha.youyacao.com
	 */
 -->



<template>
	<view class="body">
		<list @loadmore="floadmore">
			<cell v-for="(item, index) in list" :key="index">
				<view class="item">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<view class="right">
						<view class="userinfo">
							<view class="right-head">
								<text class="nickname">{{ item.nickname }}</text>
							</view>
						</view>
						<view class="btn bg-red" v-if="item.is_Black" @tap="_Black(item)">
							<text class="btn-text">拉黑</text>
						</view>
						<view class="btn" v-else @tap="_unBlack(item)">
							<text class="btn-text">移出黑名单</text>
						</view>
					</view>
				</view>
			</cell>
			<cell v-if="!loading">
				<text class="tip-text">正在加载...</text>
			</cell>
			<cell v-if="noData && list.length === 0">
				<text class="tip-text">暂无数据</text>
			</cell>
			<cell v-if="noData && list.length > 10">
				<text class="tip-text">没有更多了</text>
			</cell>
		</list>

	</view>
</template>

<script>
import { BlackList, Black, UnBlack } from '@/common/api.js'

export default {
	data () {
		return {
			current: 0,
			floading: false,
			fnoData: false,
			fpage: 1,
			flist: [],
			ftotal: 0,
			total: 0,
			page: 1,
			list: [],
			loading: false,
			noData: false
		};
	},
	onLoad (options) {
		uni.setNavigationBarTitle({
			title: options.nickname
		})
		this.current = Number(options.current)
	},
	onShow () {
		this._getBlackList()
	},
	methods: {
		change ({ detail }) {
			this.current = detail.current
		},

		userCenter (item) {
			uni.navigateTo({
				url: `/pages/my/user-center/user-center?user_id=${item.user_id}`
			})
		},
		floadmore () {
			this.fpage++
			this._getFansList()
		},
		_getBlackList () {
			BlackList({
				page: this.page,
				limit: 10
			}).then(({ code, data }) => {
				console.log(data)
				this.loading = true
				if (code === 200) {
					const { total, total_page, current_page, list } = data
					this.total = total
					if (current_page === 1) {
						this.list = list
					} else {
						this.list = this.list.concat(list)
					}
					if (total_page === 0 || current_page >= total_page) {
						this.noData = true
					}
				}
			})
		},
		loadmore () {
			this.page++
			this._getBlackList()
		},
		_Black (item) {
			Black({
				to_user_id: item.user_id
			}).then(({ code, msg }) => {
				uni.showToast({
					title: msg,
					icon: 'none'
				})

				if (code === 200) {
					this._getBlackList()

				}
			})
		},
		_unBlack (item) {
			UnBlack({
				user_id: item.user_id,
				to_user_id: item.to_user_id
			}).then(({ code, msg }) => {
				console.log(code, msg)
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				if (code === 200) {
					this._getBlackList()

				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.bg-red {
	background-color: #fa3534;
}

.tip-text {
	text-align: center;
	color: #FFFFFF;
	padding: 32rpx 0;
	font-size: 30rpx;
}

.btn-text {
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 42rpx;
}

.btn {
	height: 46rpx;
	border-radius: 61rpx 61rpx 61rpx 61rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.8);
	padding: 0 10rpx;
}

.signature {
	font-size: 28rpx;
	color: #808080;
	lines: 1;
	text-overflow: ellipsis;
}

.nickname {
	font-size: 32rpx;
	color: #FFFFFF;
	margin-bottom: 12rpx;
}

.userinfo {
	flex: 1;
}

.right {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
}

.item {
	margin: 32rpx 32rpx 0;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 24rpx;
}

.swiper {
	flex: 1;
}

.active {
	border-bottom-color: #19be6b;
}

.head-item__text {
	font-size: 32rpx;
	color: #FFFFFF;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-bottom-width: 2rpx;
	border-bottom-color: #252a34;
}

.head-item {
	flex: 1;
}

.head {
	height: 80rpx;
	padding: 0 32rpx;
	flex-direction: row;
}

.body {
	flex: 1;
	background-color: transparent;
}
</style>
